<script setup>
  import {useAttrs,ref, reactive, defineProps, defineComponent, defineEmits, defineExpose, onMounted,computed} from 'vue'

  const props = defineProps({
  content: {
    type: [Object, String],
    default: () => ({})
  },
  contentProps: {
    type: Object,
    default: () => ({})
  },
  emitValues: {
    type: Boolean,
    default: false
  },
  resolve: {
    type: Function,
    default: () => () => true
  },
  confirmButtonText: {
    type: String,
    default: '确定'
  },
  confirmButtonType: {
    type: String,
    default: 'primary'
  },
  cancelButtonText: {
    type: String,
    default: '取消'
  },
  cancelButtonType: {
    type: String,
    default: 'default'
  },
  buttonSize: {
    type: String,
    default: 'default'
  },
  needHeader: {
    type: Boolean,
    default: true
  },
  needFooter: {
    type: Boolean,
    default: true
  },
  showCancelButton: {
    type: Boolean,
    default: true
  },
  showConfirmButton: {
    type: Boolean,
    default: true
  }
})

const modalContentRef = ref()
const confirmDisabled = ref(false)
const shown = ref(false)
const isHTMLContent = computed(() => typeof props.content === 'string')

const openModal = () => {
  shown.value = true
}

const closeModal = () => {
  shown.value = false
}

const confirmPass = () => {
  confirmDisabled.value = false
  closeModal()
  // 是否需要把处理后的值给扔过来
  if (props.emitValues && modalContentRef.value?.getValues) {
    props.resolve({
      result: true,
      values: modalContentRef.value?.getValues()
    })
  } else {
    props?.resolve({
      result: true,
      values: []
    })
  }
}

const confirm = async () => {
  confirmDisabled.value = true
  console.log("confirm")
  if (modalContentRef.value?.passGuard) {
    console.log("校驗")
    try {
      const canPass = await modalContentRef.value.passGuard()

      if (canPass) {
        confirmPass()
      } else {
        confirmDisabled.value = false
      }
    } catch (error) {
      confirmPass()
      console.log(error)
    }
  } else {
    console.log("else校驗")
    confirmPass()
  }
}

defineExpose({
  openModal,
  closeModal
})
</script>

<template>
  <el-dialog
    v-model="shown"
    v-bind="$attrs"
    class="custom-modal"
    :data-need-header="needHeader"
  >
    <template #header>
      <template v-if="needHeader">
        <template v-if="typeof $attrs.title === 'string'">
          <div v-html="$attrs?.title"></div>
        </template>
        <template v-else>
          <!-- 暂未实现 -->
          <component :is="$attrs.title" v-if="shown" ref="headerRef" />
        </template>
      </template>
    </template>
    <template #default>
      <div>
        <div v-if="isHTMLContent" v-html="content"></div>
        <template v-else>
          <!--最後 的content 会被渲染到这里来-->
          <component
            :is="content"
            v-bind="{ ...contentProps, closeModal, confirm }"
            v-if="shown"
            ref="modalContentRef"
          />
        </template>
      </div>
    </template>

    <template v-if="needFooter" #footer>
      <div>
        <el-button
          v-if="showCancelButton"
          :type="cancelButtonType"
          :size="buttonSize"
          @click="closeModal"
        >
          <span uno-text="12px">{{ cancelButtonText }}</span>
        </el-button>
        <el-button
          v-if="showConfirmButton"
          :disabled="confirmDisabled"
          :type="confirmButtonType"
          :size="buttonSize"
          @click="confirm"
        >
          <span uno-text="12px">{{ confirmButtonText }}</span>
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style>
.custom-modal {
  border-radius: 5px;
}

::v-deep .el-dialog__header{
  display: block;
  font-weight: 600;
  color: #464c5b;
  border-bottom: 1px solid #eee;

}

.el-dialog__body {
  padding-top: 12px;
  padding-bottom: 12px;
  border-top: 1px solid #e3e8ee;
  border-bottom: 1px solid #e3e8ee;
}
.el-dialog__footer {
  padding-bottom: 15px;
  padding-top: 15px;
}


/*&[data-need-header='true'] {
  .el-dialog__header {
    display: block;
    font-weight: 600;
    color: #464c5b;
  }
}

&[data-need-header='false'] {
  .el-dialog__header {
    display: none;
  }
}*/
</style>
